<template>
  <div>
    <transition :name="transitionName">
      <router-view class="transitionBody"></router-view>
      <Footer v-if="isFooter"></Footer>
    </transition>

    <tab-bar v-if="isTabbar"></tab-bar>
  </div>
</template>

<script>
import TabBar from '@/components/Tabbar/index'
import Footer from "@/components/flooter/index.vue";
import safeBottom from "@/components/saveBottom/index.vue";
import router from "@/router";
  export default {
    data(){
      return{
        isTabbar:true,
        isFooter:true,
        transitionName: 'transitionLeft',
      }
    },
    components:{TabBar,Footer,safeBottom},
    methods:{
      getPath(path){
        /^\/$|product|loan/.test(path) ? this.isFooter =true : this.isFooter=false
        if(/mine|^\/$|product|shop/.test(path)){
          this.isTabbar=true
        }else{
          this.isTabbar=false
        }
      }
    },
    mounted() {
      this.getPath(this.$route.path)
    },
    watch: {
      '$route'(to,from){
          this.getPath(to.path)
          this.transitionName = to.meta.index < from.meta.index  ? 'transitionLeft' : 'transitionRight'
      },
      deep: true,
      immediate: true,
    },

  }
</script>

<style scoped lang="scss">

.transitionBody {
  transition: all 0.4s ease-out;
}

.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.transitionLeft-enter-active,
.transitionRight-enter-active {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>
